<template>
  <div id="header">
     <div id="content_header">
     <ul>
       <li ><label>KuaiBao</label></li>
       <li  v-for="item in showList" v-on:click="send(item.type)"><label :class="item.style">{{item.title}}</label></li>
       
     </ul>
     </div>
  </div>
</template>

<script>

   export default({
     data: function() {
            return {
              showList:[
               
               {
                  title:"首页",
                  type:"00",
                  style:"selt"
               },
                {
                  title:"HTML5",
                  type:"01",
                  style:"no_selt"
               },
                {
                  title:"NODE",
                  type:"02",
                  style:"no_selt"
               },
               {
                  title:"微信开发",
                  type:"03",
                  style:"no_selt"
               },
               {
                  title:"服务端",
                  type:"04",
                  style:"no_selt"
               },
               {
                  title:"原生app",
                  type:"05",
                  style:"no_selt"
               },
               {
                  title:"杂谈",
                  type:"06",
                  style:"no_selt"
               }

              ]
            }
        },
    methods:{
      send:function(msg) {
         for (var i = 0; i < this.showList.length; i++) {
            this.showList[i].style="no_selt";
            if (this.showList[i].type==msg) {
              this.showList[i].style="selt";
            }
         }
  

        this.$emit('show-what',msg);
      }
    }
  })


</script>


<style lang="scss" scoped>
    @import "../../static/css/header.scss";
</style>